<h4>属性指令</h4>
<pre class="note">
应用功能：模板页面中标签的属性进行赋值，修改等相关操作
应用语法：＜标签  [属性名]="取值"  ＞
    + 属性名：angular内置属性指令名称;W3C规范的HTML标签属性和JS DOM属性
        注意：angular只对部分 HTML标签属性和JS DOM属性 进行支持
    + 取值：要求值的类型必须是属性需要的类型，如果不是浏览器环境会完成转换！！
特性:
    1、具有响应式
    2、属性指令不会将变量进行字符串式转换，但浏览器会完成需求的转换操作
</pre>
<h5>普通属性指令</h5>
<pre class="note">
属性指令取值范围：组件变量，匿名变量，表达式
属性指令的特殊属性操作
    
    1、boolean属性绑定
        建议使用属性指令进行绑定，因为属性指令可以保留变量类型，方法通过true|false进行操作
        如果使用插值表达式，插值表达式会将值转为string,浏览器会将值转为boolean
    2、具有路径请求的属性
        如果取值为非空字符串值，浏览会认为该标签需要请求额外资源，主动发送请求
        如果取值为空字符串值，浏览器认为该标签没有额外资源需要装载，不会发生请求
        建议使用 插值表达式
    3、自定义属性的绑定
        angular项目中不能直接绑定自定义属性，可以完成为 DOM属性 attributes 添加属性完成
        anguler将 attributes 的getAttributes方法和setAttributes方法封装成了一个特殊指令[attr]
        [attr] 指令不能被直接操作，完成自定义属性的绑定，通过 [attr.自定义属性名] = “属性值”
</pre>
<p id=" {{str}} ">插值表达式-绑定HTML标签属性</p>
<p [id]="str">属性指令-绑定HTML标签属性</p>
<input type="button" value="修改str" (click)=" str='新值' ">
<hr>
<p id=" {{arr}} ">插值表达式-绑定HTML标签属性-arr</p>
<p [id]=" arr ">属性指令-绑定HTML标签属性-arr</p>
<p id="{{user}}">插值表达式-绑定HTML标签属性-user</p>
<p [id]="user">属性指令-绑定HTML标签属性-user</p>
<hr>
<!-- 
    当绑定属性时 null undefined  属性指令绑定会使浏览器先强制转换为sting类型
    再根据 属性需求的 值的类型 再次转换为字符串类型 
    插值表达式会转换 为空字符串
-->
<p id="{{ arg1 }}">插值表达式-绑定HTML标签属性-null</p>
<p [id]="arg1">属性指令-绑定HTML标签属性-null</p>
<p id="{{ arg2 }}">插值表达式-绑定HTML属性-undefined</p>
<p [id]="arg2">属性指令-绑定HTML标签属性-undefined</p>
<hr>
<!-- 
    变量为布尔类型时 差值表达式会转化字符串 非空字符串为true
 -->
<p>flag:{{ flag }}</p>
<input type="text" value="参考标签" disabled><br>
<input type="text" value="插值表达式" disabled="{{ flag }}"><br>
<input type="text" value="属性指令" [disabled]="flag"><br>
<input type="button" value="切换true|false" (click)=" flag = !flag "><br>
<hr>
参考：<img src="https://www.baidu.com/img/baidu_jgylogo3.gif"><br>
插值表达式：<img src="{{ src }}" alt=""><br>
属性指令<img [src]="src" alt=""><br>
<input type="button" value="src赋值" (click)=" src='https://www.baidu.com/img/baidu_jgylogo3.gif' ">
<hr>
<p itany="自定义属性">绑定自定义属性 itany-参考</p>
<p attr.itany="{{ str }}">绑定自定义属性 itany-插值表达式</p>
<p [attr.itany]="str">绑定自定义属性 itany-属性指令</p>
<pre class="note">
1、ngClass:提供多元化的页面样式绑定方式，给开发者提供简便的操作语法
语法：＜标签 [ngClass]="取值"＞
取值：ngClass的取值类型不同，操作行为不同
    a、string 效果等效于 为 class或者className完成插值表达式赋值或者指令绑定
    b、array 借助数组的内置方法，完成样式的快速添加和删除操作
        ngClass取值数组时，会将数组转为 class可识别的字符串
        通过数组方法完成对样式的添加扩展时，如果多次加入了相同的样式名称
            -> 内存中的数组会发生变化，多次记录相同值
            -> ngClass取值当前数组值时，会自动进行去重操作
    c、object 借助于对象的key:value的定义语法，以key描述可能使用到的样式名
        value描述样式是否被使用，完成快速的样式切换
2、ngStyle:提供安全性的行内样式绑定操作
    语法：＜标签 [ngStyle]=" 取值 "＞
    取值：只能取 Object -> key:value 其中key为样式名可以使用驼峰或者连字符， value取值为样式的合法值

</pre>
<p class=" fc bc border fs ">绑定class-参考</p>
<p>classStr：{{ classStr }}</p>
<p class=" {{ classStr }} ">绑定class-插值表达式</p>
<p [class]=" classStr ">绑定class-属性指令</p>
<p className=" {{classStr}} ">className-插值表达式</p>
<p [className]=" classStr ">className-属性指令</p>
<p [ngClass]=" classStr ">ngClass-属性指令-string</p>
<input type="button" value="删除bc样式" (click)="removeBc1()">
<input type="button" value="添加border" (click)="addBorder1()">
<hr>
<p>classArr:{{ classArr }}</p>
<p [ngClass]="classArr">ngClass-属性指令-array</p>
<input type="button" value="删除bc样式" (click)="removeBc2()">
<input type="button" value="添加border" (click)="addBorder2()">
<input type="button" value="切换字体颜色" (click)="changeColor()">
<hr>
<p [ngClass]=" classObj ">ngClass-属性指令-Object</p>
<input type="button" value="切换bc样式" (click)="classObj.bc = !classObj.bc">
<input type="button" value="切换fs样式" (click)="classObj.fs = !classObj.fs">
<input type="button" value="切换border样式" (click)="classObj.border = !classObj.border">
<input type="button" value="切换fc样式" (click)="classObj.fc = !classObj.fc">
<hr>
<p [style]=" 'color:red' ">string 绑定行内样式</p>
<p [ngStyle]=" styleObj ">object ngStyle绑定</p>